<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <title>Title</title>
        </head>
        <body>
                <div th:replace="common/top"></div>

                <div id="Content">

                        <div id="BackLink">
                                <a href="/catalog/main">Return to Main Menu</a>
                        </div>

                        <div id="Catalog">

                                <div id="Cart">

                                        <h2>Shopping Cart</h2>
                                        <form action="/cart/updateCartQuantities" method="post">
                                                <script>
                                                    function updateCart() {
                                                        var btn = document.getElementById("update");
                                                        btn.click();
                                                    }
                                                </script>
                                                <table>

                                                        <tr>
                                                                <th><b>Item ID</b></th>
                                                                <th><b>Product ID</b></th>
                                                                <th><b>Description</b></th>
                                                                <th><b>In Stock?</b></th>
                                                                <th><b>Quantity</b></th>
                                                                <th><b>List Price</b></th>
                                                                <th><b>Total Cost</b></th>
                                                                <th>&nbsp;</th>
                                                        </tr>


                                                        <tr th:if="${cart.getCartItemList().size()==0}">
                                                                <td colspan="8"><b>Your cart is empty.</b></td>
                                                        </tr>


                                                        <tr th:if="${cart.getCartItemList().size()!=0}" th:each="cartItem:${cart.getCartItemList()}">
                                                                <td>
                                                                        <a th:text="${cartItem.item.itemId}"
                                                                           th:href="@{/cart/viewItem(itemId=${cartItem.item.itemId})}">itemId</a>
                                                                </td>
                                                                <td th:text="${cartItem.item.product.productId}">
                                                                        productId
                                                                </td>
                                                                <td th:text="${cartItem.item.attribute1}+${cartItem.item.product.name}">

                                                                </td>
                                                                <td th:text="${cartItem.inStock}">
                                                                        inStock
                                                                </td>
                                                                <td>
                                                                        <label>
                                                                                <input type="text" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}"
                                                                                       onchange="updateCart()"/>
                                                                        </label>
                                                                </td>
                                                                <td th:text="${cartItem.item.listPrice}" pattern="$#,##0.00">
                                                                        2.33
                                                                </td>
                                                                <td th:text="${cartItem.total}" pattern="$#,##0.00">
                                                                        2.33
                                                                </td>
                                                                <td>
                                                                        <a th:href="@{removeItemFromCart(workingItemId=${cartItem.item.itemId})}"
                                                                           class="Button">Remove</a>
                                                                </td>
                                                        </tr>

                                                        <tr>
                                                                <td colspan="7"  th:text="'Sub Total: '+${cart.getSubTotal()}" pattern="$#,##0.00">

                                                                </td>
                                                                <td><input type="submit" id="update" value="Update Cart"/>
                                                                </td>
                                                        </tr>
                                                </table>
                                        </form>

                                        <tr th:if="${cart.getCartItemList().size()>0}">
                                                <a href="/order/checkout" class="Button">Proceed to Checkout</a>
                                        </tr>
                                </div>

                                <div id="Separator">&nbsp;</div>
                        </div>
                </div>

                <div th:replace="common/bottom"></div>

        </body>
</html>